<script setup>
import { ref, inject, onMounted, watch, computed } from 'vue'
import { useRoute } from 'vue-router'
import Button from '@/components/Button.vue'
import ViewGoodsDetail from './components/ViewGoodsDetail.vue'
import AntdIcon from '@/components/AntdIcon/index.vue'
import { useCommonStore } from '@/stores'
import { getGoodsListApi, addCartApi } from '@/api'
import { message } from 'ant-design-vue'
import { useAddCart } from '@/utils'
const area = computed(() => useCommonStore().selectedArea)

const viewGoodsDetailRef = ref()
const state = inject('state')
const layout = inject('layout')
const goodsList = ref([])
const searchVal = computed(() => useCommonStore().searchVal)
// 监听父页面传递的参数的变化
watch(
  () => state.value,
  (val) => {
    const { is_available } = val
    getGoodsList(is_available ? 1 : 0)
  },
  {
    deep: true,
  },
)
// 监听搜索值的变化
watch(
  () => searchVal.value,
  () => {
    getGoodsList()
  },
)

watch(
  () => area.value.key,
  () => {
    getGoodsList()
  },
  {
    deep: true,
  },
)

// 获取商品列表
const getGoodsList = (is_available = 1) => {
  const { selectedGame, selectedArea, selectedCategory } = useCommonStore()
  const params = {
    filters: {
      game_id: selectedGame.key,
      area_id: selectedArea.key,
      category_id: selectedCategory.keys[0],
      is_available,
      search: searchVal.value,
    },
  }
  getGoodsListApi(params).then((res) => {
    res.data.forEach((item) => {
      item.num = 1
      item.activeSku = item.sku_lists[0].sku
      item.stock = item.sku_lists[0].stock
      item.sku_id = item.sku_lists[0].id
      item.sku_title = item.sku_lists[0].spece_value_title
      // if (item.multi === 'true') {
      // } else item.activeSku = item.sku
    })
    goodsList.value = res.data
  })
}
// 切换商品规格
const switchSku = (index, sku, stock, id, sku_title) => {
  goodsList.value[index].activeSku = sku
  goodsList.value[index].stock = stock
  goodsList.value[index].sku_id = id
  goodsList.value[index].sku_title = sku_title
}
const addToCart = (item) => {
  console.log(item)

  const { open_inquiry, stock, spu, activeSku } = item
  // 是否开启询价模式
  if (open_inquiry === 1) {
    viewGoodsDetailRef.value.open({
      type: 'inquiry',
      title: 'Want this Item?',
      spu,
      sku: activeSku,
    })
  } else {
    // 库存充足
    if (stock) {
      // 添加购物车
      const { selectedGame, selectedArea } = useCommonStore()
      const product = {
        spu: spu,
        sku: activeSku,
        name: item.name,
        img: item.img,
        price: item.price,
        num: item.num,
        sku_id: item.sku_id,
        sku_title: item.sku_title,
        stock,
      }
      useAddCart(selectedGame.key, selectedArea.key, product)
      // const params = {
      //   game_id: selectedGame.key,
      //   area_id: selectedArea.key,
      //   sku: activeSku,
      //   num: 1,
      // }
      // addCartApi(params).then(() => {
      //   message.success('Add to cart successfully')
      // })
    } else {
      viewGoodsDetailRef.value.open({
        type: 'email',
        title: 'Want this Item?',
        spu,
        sku: activeSku,
      })
    }
  }
}
// 查看商品详情
const viewDetail = (item) => {
  viewGoodsDetailRef.value.open({
    type: 'detail',
    title: 'Want this Item?',
    detail: item.detail,
  })
}
onMounted(() => {
  getGoodsList()
})
</script>
<template>
  <div
    class="w-full grid gap-5 items-start justify-start max-[750px]:grid-cols-1"
    :class="layout === 'list' ? 'grid-cols-1' : 'grid-cols-2'"
  >
    <!-- goods -->
    <div
      class="p-3 border border-gray-200 bg-white"
      v-for="(item, index) in goodsList"
      :key="'products' + item"
      v-if="goodsList.length !== 0"
    >
      <div
        class="w-full justify-between max-[750px]:block"
        :class="layout === 'list' ? 'flex' : 'bolck'"
      >
        <div
          class="flex-1 flex gap-5 max-[750px]:flex-row-reverse"
          :class="layout === 'list' ? '' : 'flex-row-reverse'"
        >
          <div>
            <img :src="item.img" alt="" class="w-20 mt-10" />
          </div>
          <div class="flex-1 flex flex-col gap-3">
            <div class="text-2xl font-bold leading-loose mb-4 max-[750px]:text-[14px]">
              {{ item.name }}
            </div>
            <!-- select sku -->
            <div
              class="flex justify-between pl-8 max-[750px]:text-[12px] sku-item"
              :class="sku.sku === item.activeSku ? 'a-sku' : ''"
              v-for="sku in item.sku_lists"
              :key="'skui' + sku"
              v-if="item.sku_lists && item.multi === 'true'"
              @click="switchSku(index, sku.sku, sku.stock, sku.id, sku.spece_value_title)"
            >
              <div class="flex gap-2 leading-loose">
                <!-- <span class="bg-gray-50 pl-2 pr-2">Unidentified</span> -->
                <span class="bg-gray-50 pl-2 pr-2">{{ sku.spece_value_title }}</span>
              </div>
              <div class="flex items-center pr-40 max-[750px]:hidden" v-if="layout === 'list'">
                ${{ item.price }}
              </div>
            </div>
          </div>
        </div>
        <div class="flex justify-end text-2xl leading-loose">${{ item.price }}</div>
      </div>
      <div class="flex flex-col gap-3 justify-between mt-5">
        <div class="flex justify-end gap-2">
          <div
            class="bg-gray-700 text-white pl-3 pr-3 flex items-center cursor-pointer"
            @click="viewDetail(item)"
          >
            <AlignCenterOutlined />
          </div>
          <a-select v-model:value="item.num" size="small" :bordered="false">
            <a-select-option :value="num" v-for="num in item.stock"> {{ num }} </a-select-option>
          </a-select>
          <!-- open_inquiry 1 开启 0 未开启 -->
          <Button
            :bg="item.open_inquiry === 1 ? '#364153' : item.stock ? '#f9a044' : '#364153'"
            @click="addToCart(item)"
          >
            <span v-if="item.open_inquiry === 1">REQUEST PRICE</span>
            <span v-else> {{ item.stock ? 'ADD TO CART' : 'REQUEST' }}</span>
            <AntdIcon
              :icon="
                item.open_inquiry === 1
                  ? 'SendOutlined'
                  : item.stock
                    ? 'ShoppingCartOutlined'
                    : 'BellFilled'
              "
            />
          </Button>
        </div>
      </div>
    </div>
    <div class="text-center pt-10 pb-10" v-else>
      <span class="text-bold text-3xl">Its Empty...</span>
    </div>
    <ViewGoodsDetail ref="viewGoodsDetailRef" />
  </div>
</template>
<style lang="scss" scoped>
.sku-item {
  cursor: pointer;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1px solid #333;
  }
  &.a-sku {
    &::after {
      border-color: #f9a044;
    }
    &::before {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      top: 50%;
      left: 8px;
      transform: translateY(-50%);
      border-radius: 50%;
      background: #f9a044;
    }
  }
}
.ant-select {
  border: 1px solid #333;
  min-width: 55px;
}
:deep(.ant-select-selector) {
  height: 100% !important;
  align-items: center;
}
</style>
